"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { BarChart3, Users, Shield, Key, TrendingUp, Download } from "lucide-react"

export default function ReportsPage() {
  const userStats = [
    { date: "2024-01-15", newUsers: 12, activeUsers: 145, loginCount: 234 },
    { date: "2024-01-16", newUsers: 8, activeUsers: 152, loginCount: 198 },
    { date: "2024-01-17", newUsers: 15, activeUsers: 167, loginCount: 276 },
    { date: "2024-01-18", newUsers: 6, activeUsers: 159, loginCount: 189 },
    { date: "2024-01-19", newUsers: 11, activeUsers: 163, loginCount: 245 },
    { date: "2024-01-20", newUsers: 9, activeUsers: 171, loginCount: 267 },
  ]

  const roleDistribution = [
    { role: "超级管理员", count: 1, percentage: 0.1 },
    { role: "管理员", count: 3, percentage: 0.2 },
    { role: "普通用户", count: 1156, percentage: 93.7 },
    { role: "访客", count: 74, percentage: 6.0 },
  ]

  const permissionUsage = [
    { permission: "user:read", usage: 1234, roles: 3 },
    { permission: "user:write", usage: 456, roles: 2 },
    { permission: "role:read", usage: 234, roles: 3 },
    { permission: "role:write", usage: 89, roles: 1 },
    { permission: "permission:read", usage: 167, roles: 2 },
    { permission: "permission:write", usage: 45, roles: 1 },
  ]

  return (
    <div className="space-y-6">
        <div className="flex items-center justify-between">
          <div>
            <h2 className="text-3xl font-bold tracking-tight">统计报表</h2>
            <p className="text-muted-foreground">系统数据统计和分析报告</p>
          </div>
          <Button>
            <Download className="mr-2 h-4 w-4" />
            导出报表
          </Button>
        </div>

        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">今日新增用户</CardTitle>
              <Users className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">9</div>
              <p className="text-xs text-muted-foreground">
                <TrendingUp className="inline h-3 w-3 mr-1" />
                较昨日 +12.5%
              </p>
            </CardContent>
          </Card>
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">活跃用户</CardTitle>
              <Users className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">171</div>
              <p className="text-xs text-muted-foreground">
                <TrendingUp className="inline h-3 w-3 mr-1" />
                较昨日 +4.9%
              </p>
            </CardContent>
          </Card>
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">今日登录次数</CardTitle>
              <Shield className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">267</div>
              <p className="text-xs text-muted-foreground">
                <TrendingUp className="inline h-3 w-3 mr-1" />
                较昨日 +8.9%
              </p>
            </CardContent>
          </Card>
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">权限调用次数</CardTitle>
              <Key className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">2,225</div>
              <p className="text-xs text-muted-foreground">
                <TrendingUp className="inline h-3 w-3 mr-1" />
                较昨日 +15.2%
              </p>
            </CardContent>
          </Card>
        </div>

        <Tabs defaultValue="users" className="space-y-4">
          <TabsList className="grid w-full grid-cols-4">
            <TabsTrigger value="users">用户统计</TabsTrigger>
            <TabsTrigger value="roles">角色分布</TabsTrigger>
            <TabsTrigger value="permissions">权限使用</TabsTrigger>
            <TabsTrigger value="activity">活动日志</TabsTrigger>
          </TabsList>

          <TabsContent value="users" className="space-y-4">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center">
                  <Users className="mr-2 h-5 w-5" />
                  用户增长趋势
                </CardTitle>
                <CardDescription>最近7天的用户数据统计</CardDescription>
              </CardHeader>
              <CardContent>
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>日期</TableHead>
                      <TableHead>新增用户</TableHead>
                      <TableHead>活跃用户</TableHead>
                      <TableHead>登录次数</TableHead>
                      <TableHead>增长率</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {userStats.map((stat, index) => (
                      <TableRow key={stat.date}>
                        <TableCell>{stat.date}</TableCell>
                        <TableCell>{stat.newUsers}</TableCell>
                        <TableCell>{stat.activeUsers}</TableCell>
                        <TableCell>{stat.loginCount}</TableCell>
                        <TableCell>
                          {index > 0 && (
                            <Badge
                              variant={stat.activeUsers > userStats[index - 1].activeUsers ? "default" : "secondary"}
                            >
                              {stat.activeUsers > userStats[index - 1].activeUsers ? "+" : ""}
                              {(
                                ((stat.activeUsers - userStats[index - 1].activeUsers) /
                                  userStats[index - 1].activeUsers) *
                                100
                              ).toFixed(1)}
                              %
                            </Badge>
                          )}
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="roles" className="space-y-4">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center">
                  <Shield className="mr-2 h-5 w-5" />
                  角色分布统计
                </CardTitle>
                <CardDescription>系统中各角色的用户分布情况</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {roleDistribution.map((role) => (
                    <div key={role.role} className="flex items-center justify-between p-4 border rounded-lg">
                      <div className="flex items-center space-x-3">
                        <Shield className="h-5 w-5 text-primary" />
                        <div>
                          <div className="font-medium">{role.role}</div>
                          <div className="text-sm text-muted-foreground">{role.count} 个用户</div>
                        </div>
                      </div>
                      <div className="text-right">
                        <div className="text-2xl font-bold">{role.percentage}%</div>
                        <div className="w-24 bg-muted rounded-full h-2 mt-1">
                          <div className="bg-primary h-2 rounded-full" style={{ width: `${role.percentage}%` }}></div>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="permissions" className="space-y-4">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center">
                  <Key className="mr-2 h-5 w-5" />
                  权限使用统计
                </CardTitle>
                <CardDescription>各权限节点的调用频率和使用情况</CardDescription>
              </CardHeader>
              <CardContent>
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>权限代码</TableHead>
                      <TableHead>调用次数</TableHead>
                      <TableHead>关联角色数</TableHead>
                      <TableHead>使用频率</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {permissionUsage.map((permission) => (
                      <TableRow key={permission.permission}>
                        <TableCell>
                          <Badge variant="outline">{permission.permission}</Badge>
                        </TableCell>
                        <TableCell>{permission.usage.toLocaleString()}</TableCell>
                        <TableCell>{permission.roles}</TableCell>
                        <TableCell>
                          <div className="flex items-center space-x-2">
                            <div className="w-16 bg-muted rounded-full h-2">
                              <div
                                className="bg-primary h-2 rounded-full"
                                style={{
                                  width: `${Math.min((permission.usage / Math.max(...permissionUsage.map((p) => p.usage))) * 100, 100)}%`,
                                }}
                              ></div>
                            </div>
                            <span className="text-sm text-muted-foreground">
                              {((permission.usage / Math.max(...permissionUsage.map((p) => p.usage))) * 100).toFixed(1)}
                              %
                            </span>
                          </div>
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="activity" className="space-y-4">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center">
                  <BarChart3 className="mr-2 h-5 w-5" />
                  系统活动日志
                </CardTitle>
                <CardDescription>最近的系统操作和活动记录</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="flex items-center justify-between p-3 border rounded-lg">
                    <div className="flex items-center space-x-3">
                      <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                      <div>
                        <div className="font-medium">用户 admin 登录系统</div>
                        <div className="text-sm text-muted-foreground">IP: 192.168.1.100</div>
                      </div>
                    </div>
                    <div className="text-sm text-muted-foreground">2024-01-20 10:30:25</div>
                  </div>
                  <div className="flex items-center justify-between p-3 border rounded-lg">
                    <div className="flex items-center space-x-3">
                      <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
                      <div>
                        <div className="font-medium">创建新用户 user003</div>
                        <div className="text-sm text-muted-foreground">操作人: manager</div>
                      </div>
                    </div>
                    <div className="text-sm text-muted-foreground">2024-01-20 09:15:42</div>
                  </div>
                  <div className="flex items-center justify-between p-3 border rounded-lg">
                    <div className="flex items-center space-x-3">
                      <div className="w-2 h-2 bg-orange-500 rounded-full"></div>
                      <div>
                        <div className="font-medium">修改角色权限</div>
                        <div className="text-sm text-muted-foreground">角色: 普通用户, 操作人: admin</div>
                      </div>
                    </div>
                    <div className="text-sm text-muted-foreground">2024-01-20 08:45:18</div>
                  </div>
                  <div className="flex items-center justify-between p-3 border rounded-lg">
                    <div className="flex items-center space-x-3">
                      <div className="w-2 h-2 bg-red-500 rounded-full"></div>
                      <div>
                        <div className="font-medium">用户登录失败</div>
                        <div className="text-sm text-muted-foreground">用户: user001, IP: 192.168.1.105</div>
                      </div>
                    </div>
                    <div className="text-sm text-muted-foreground">2024-01-20 07:22:33</div>
                  </div>
                  <div className="flex items-center justify-between p-3 border rounded-lg">
                    <div className="flex items-center space-x-3">
                      <div className="w-2 h-2 bg-purple-500 rounded-full"></div>
                      <div>
                        <div className="font-medium">系统备份完成</div>
                        <div className="text-sm text-muted-foreground">备份大小: 245MB</div>
                      </div>
                    </div>
                    <div className="text-sm text-muted-foreground">2024-01-20 02:00:00</div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>
  )
}
